﻿@{
    ViewBag.Title = "Create Vacation Schedule";
}
<link href="@Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/fullcalendar.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    function updateCalendar() {
        $('#calendar').fullCalendar('refetchEvents');
    }

    var selectedDate = new Date();

    $(document).ready(function () {
        $('#datepicker').datepicker({
            inline: true,
            onSelect: function (dateText, inst) {
                var d = new Date(dateText);
                $('#calendar').fullCalendar('gotoDate', d);
                selectedDate = d;
            }
        });
    });

    $(document).ready(function () {
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: '',
                center: 'title',
                right: ''
            },
            //defaultView: 'agendaMonth',
            editable: false,
            events: '@Url.Action("ListVacations", "Calendar")',
            eventClick: function (calEvent, jsEvent, view) {
                var b = null;

                if (!calEvent.completed) {
                    b = { 'Delete': function () {
                        $.post('@Url.Action("VacationModalDeletePost", "Calendar")' + '/' + calEvent.id.toString(),
                            function (data) { $('#calendar').fullCalendar('refetchEvents'); });
                        alert('Vacation deleted.');
                        $(this).dialog("close");
                        return true;
                    }
                    };
                }
                $('<div></div>')
                    .load('@Url.Action("VacationModalDelete", "Calendar")' + '/' + calEvent.id.toString())
                    .dialog({
                        buttons: b,
                        resizable: false,
                        title: 'Schedule Description',
                        width: 500,
                        height: 250
                    });
                return false;
            }
        });
    });

    function AddEvent() {
        var resourceId = $('#ResourceList :selected').val();
        var deputyId = $('#DeputyList :selected').val();

        if (resourceId == null || resourceId == '') {
            alert('Select a Resource!');
            return;
        }

        if (deputyId == null || deputyId == '') {
            alert('Select a Deputy!');
            return;
        }

        if (resourceId == deputyId) {
            alert('Deputy must be different from Resource!');
            return;
        }

        var days = $('#days').val();
        var url = '@Url.Action("AddVacation", "Calendar")'//'/Calendar.aspx/AddVacation';
        var currentTime = selectedDate.getTime();
        var localOffset = (-1) * selectedDate.getTimezoneOffset() * 60000;

        var data = {
            initialDateStamp: Math.round(new Date(currentTime + localOffset).getTime() / 1000),
            resourceId: resourceId,
            totalDays: days,
            deputyId: deputyId,
            rnd: Math.random()
        };

        params = jQuery.param(data);
        type = "POST"

        $.ajax({
            url: url,
            type: "POST",
            data: params,
            success: function (msg) {
                if (msg != null)
                    if (msg == 'exp') {
                        document.location = '@Url.Action("VacationManagement", "Calendar")'//"/Calendar.aspx/VacationManagement";
                        return;
                    }
                $('#AreaId').val('');
                $('#DeputyList').empty();
                $('#ResourceList').empty();
                $('#days').val('5');
                setTimeout(updateCalendar, 500);
                alert('Vacation added');
            }
        });
    }

    $(document).ready(function () {
        $("#AreaId").change(function () {
            var idArea = $(this).val();

            if (idArea == '') {
                var select = $("#ResourceList");
                select.empty();
                return;
            }

            $.getJSON('@Url.Action("GetResourcesListByArea", "Calendar")', { id: idArea }, //"/Calendar.aspx/GetResourcesListByArea", { id: idArea },
			function (resourceData) {
			    var select = $("#ResourceList");
			    select.empty();
			    $.each(resourceData, function (index, itemData) {
			        select.append($('<option/>', {
			            value: itemData.Value,
			            text: itemData.Text
			        }));
			    });
			});
        });
    });
</script>
<div style="float: left;">
    <div id="datepicker">
    </div>
    <br />
    <div style="padding-bottom: 5px">
        <div style="width: 70px; float: left;">
            Area:</div>
        @Html.DropDownList(
            "AreaId",
            null,
            new { style = "width: 160px;" }
            )
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 70px; float: left;">
            Resources:</div>    
        <select id="ResourceList" size="8" style = "width: 160px;">
        </select>
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 70px; float: left;">
            Deputy:</div>    
        @*<select id="DeputyList" size="8" style = "width: 160px;">*@
        @Html.DropDownList("DeputyList")
        </select>
    </div>
    <div style="padding-bottom: 5px">
        <div style="width: 70px; float: left;">
            Days:</div>
        <select id="days">
            <option>5</option>
            <option>10</option>
            <option>15</option>
            <option>20</option>
            <option>30</option>
            <option>35</option>
            <option>40</option>
        </select>
    </div>
    <div>
        <div style="width: 70px; float: left;">
            &nbsp;</div>
        <input type="button" value="Add Vacation Schedule" onclick="AddEvent()" style = "width: 160px;" />
    </div>
</div>
<div id='calendar' style="float: right; width: 590px;">
</div>
<div>
    &nbsp;</div>
<div style="clear: both">
    &nbsp;</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#pageTitle').text('Vacation Management');
    });
//    var path = 'Url.Content("~/xml/menu-config.xml")';
//    var brand = new brand('Calendar', 'Vacation Management', 'top', path);
//    createSectionTitleName();
//    createFontWidget('all', 'yes');
</script>
